<template>
	<view class="container">
		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 身份认证 -->
			<view class="form-section">
				<view class="section-title">
					<view class="title-bar"></view>
					<text class="title-text">身份认证</text>
				</view>
				<view class="upload-grid">
					<view class="upload-item" @click="uploadIdCard('idCardFront')">
						<view class="upload-box">
							<image v-if="uploadedFiles.idCardFront" :src="domain + uploadedFiles.idCardFront"
								class="uploaded-image" mode="aspectFit"></image>
							<text v-else class="iconfont-v2 icon-shenfenzhengzhengmian"></text>
						</view>
						<text class="upload-label">身份证人像面</text>
					</view>
					<view class="upload-item" @click="uploadIdCard('idCardBack')">
						<view class="upload-box">
							<image v-if="uploadedFiles.idCardBack" :src="domain + uploadedFiles.idCardBack"
								class="uploaded-image" mode="aspectFit"></image>
							<text v-else class="iconfont-v2 icon-shenfenzhengbeimian"></text>
						</view>
						<text class="upload-label">身份证国徽面</text>
					</view>
				</view>
			</view>

			<!-- 资历认证 -->
			<view class="form-section">
				<view class="section-title">
					<view class="title-bar"></view>
					<text class="title-text">资历认证</text>
				</view>
				<view class="upload-grid four-grid">
					<view class="upload-item" @click="uploadDocument('studentCover')">
						<view class="upload-box">
							<image v-if="uploadedFiles.studentCover" :src="domain + uploadedFiles.studentCover"
								class="uploaded-image" mode="aspectFit"></image>
							<text v-else
								class="iconfont-v2 icon-yuangongguanlizhengjianxueshengzhenggongzuozheng"></text>
						</view>
						<text class="upload-label">学生证/学历证封面</text>
					</view>
					<view class="upload-item" @click="uploadDocument('studentInner')">
						<view class="upload-box">
							<image v-if="uploadedFiles.studentInner" :src="domain + uploadedFiles.studentInner"
								class="uploaded-image" mode="aspectFit"></image>
							<text v-else class="iconfont-v2 icon-zhengjianshenban"></text>
						</view>
						<text class="upload-label">学生证/学历证内页</text>
					</view>
					<view class="upload-item" @click="uploadDocument('teacherCert')">
						<view class="upload-box">
							<image v-if="uploadedFiles.teacherCert" :src="domain + uploadedFiles.teacherCert"
								class="uploaded-image" mode="aspectFit"></image>
							<text v-else class="iconfont-v2 icon-huoqufayunzige"></text>
						</view>
						<text class="upload-label">教资[选填]</text>
					</view>
					<view class="upload-item" @click="uploadDocument('avatar')">
						<view class="upload-box">
							<image v-if="uploadedFiles.avatar" :src="domain + uploadedFiles.avatar" class="uploaded-image"
								mode="aspectFit"></image>
							<text v-else class="iconfont-v2 icon-yonghutouxiang"></text>
						</view>
						<text class="upload-label">教员头像</text>
					</view>
				</view>
			</view>

			<!-- 认证声明 -->
			<view class="form-section">
				<view class="section-title">
					<view class="title-bar"></view>
					<text class="title-text">认证声明</text>
				</view>
				<view class="statement-list">
					<view class="statement-item">
						<text class="statement-number">1.</text>
						<text class="statement-text">平台仅接受在读或毕业大学生、研究生、及拥有教师资格证,但非在职的专职教员入驻</text>
					</view>
					<view class="statement-item">
						<text class="statement-number">2.</text>
						<text class="statement-text">为保障学员权益、教员资质问题、相关责任问题,平台方需审核您的相关证件证书信息</text>
					</view>
					<view class="statement-item">
						<text class="statement-number">3.</text>
						<text class="statement-text">教员入驻完全自愿原则,入驻即同意上传相关证件,并保证证件真实性,否则请勿入驻</text>
					</view>
					<view class="statement-item">
						<text class="statement-number">4.</text>
						<text
							class="statement-text">平台对证件及姓名作隐私保护,仅展示头像。建议上传真人头像,也可选择预制的卡通头像,请勿上传非人物形象图;认证通过后,教员还将拥有简历是否展示的自主权。</text>
					</view>
					<view class="statement-item">
						<text class="statement-number">5.</text>
						<text class="statement-text">上传学生证即为大学生教员,以此类推,专职教员需上传教师资格证并有相当教龄经验</text>
					</view>
					<view class="statement-item">
						<text class="statement-number">6.</text>
						<text
							class="statement-text">实名信息一经提交不可更改;未通过时,实名信息以外资料可做调整;通过时,无法修改任何资料,如有修改必要可联系客服驳回后修改。如有注销入驻需求,可联系客服注销,注销前需核验是否有遗留问题,时间为1-7工作日。</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-button">
			<u-button type="warning" @click="submitCertification">提交入驻</u-button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/family'
	export default {
		data() {
			return {
				domain:this.$Cache.get("imgHost"),
				uploadedFiles: {
					idCardFront: null,
					idCardBack: null,
					studentCover: null,
					studentInner: null,
					teacherCert: null,
					avatar: null,
					id:0
				}
			};
		},
		onLoad(options) {
			if(options.orderId){
				this.uploadedFiles.id = options.orderId
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},

			// 上传身份证
			uploadIdCard(type) {
				let that = this;
				let option = {
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					count: 1,
					pid: 7
				}
				this.$util.uploadImageOne(option, function(res) {
					if(type == "idCardFront"){
						that.uploadedFiles.idCardFront = res.substring(that.domain.length)
					}else{
						that.uploadedFiles.idCardBack = res.substring(that.domain.length)
					}
					
				});
			},

			// 上传证件
			uploadDocument(type) {
				let that = this;
				let option = {
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					count: 1,
					pid: 7
				}
				this.$util.uploadImageOne(option, function(res) {
					if(type == "studentCover"){
						that.uploadedFiles.studentCover = res.substring(that.domain.length)
					}else if(type == "studentInner"){
						that.uploadedFiles.studentInner = res.substring(that.domain.length)
					}else if(type == "teacherCert"){
						that.uploadedFiles.teacherCert = res.substring(that.domain.length)
					}else{
						that.uploadedFiles.avatar = res.substring(that.domain.length)
					}
					
				});
			},

			// 上传头像
			uploadAvatar() {
				let that = this;
				let option = {
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					count: 1,
					pid: 7
				}
				this.$util.uploadImageOne(option, function(res) {
					that.uploadedFiles.avatar = res.substring(that.domain.length)
				});
			},

			// 提交认证
			submitCertification() {
				// 验证必填项
				if (!this.uploadedFiles.idCardFront) {
					uni.showToast({
						title: '请上传身份证人像面',
						icon: 'none'
					});
					return;
				}

				if (!this.uploadedFiles.idCardBack) {
					uni.showToast({
						title: '请上传身份证国徽面',
						icon: 'none'
					});
					return;
				}

				if (!this.uploadedFiles.studentCover) {
					uni.showToast({
						title: '请上传学生证/学历证封面',
						icon: 'none'
					});
					return;
				}

				if (!this.uploadedFiles.studentInner) {
					uni.showToast({
						title: '请上传学生证/学历证内页',
						icon: 'none'
					});
					return;
				}

				if (!this.uploadedFiles.avatar) {
					uni.showToast({
						title: '请上传教员头像',
						icon: 'none'
					});
					return;
				}
			
				// 提交认证
				uni.showModal({
					title: '确认提交',
					content: '是否确认提交认证信息？提交后将进入审核流程。',
					success: (res) => {
						if (res.confirm) {
							api.insertTeacherApi(this.uploadedFiles).then(response=>{
								if(response.code == 200){
									uni.showToast({
										title: '提交成功，等待审核',
										icon: 'success',
										duration: 1000
									});
									setTimeout(() => {
										
										uni.navigateTo({
											url: `/pages/fast/jiajiao/index`
										})
									}, 1000);
								}else{
									uni.showModal({
										title: '提交失败',
										content: response.message || '提交失败，请重试',
										showCancel: false
									});
								}
							});
							
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	.container {
		padding: 24rpx;
		padding-bottom: 120rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}


	.form-section {
		background-color: #ffffff;
		border-radius: 8rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title-bar {
		width: 6rpx;
		height: 30rpx;
		background-color: #ED6567;
		margin-right: 20rpx;
		border-radius: 3rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.upload-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
	}

	.upload-grid.four-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
	}

	.upload-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.upload-box {
		width: 100%;
		height: 150rpx;
		background-color: #f8f8f8;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;

		.iconfont-v2 {
			font-size: 90rpx;
			color: #dccaaf;
		}
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		padding: 10rpx;
	}


	.upload-label {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.statement-list {
		margin-top: 20rpx;
	}

	.statement-item {
		display: flex;
		margin-bottom: 20rpx;
		align-items: flex-start;
	}

	.statement-number {
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
		margin-right: 10rpx;
		min-width: 30rpx;
	}

	.statement-text {
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
		flex: 1;
	}

	.submit-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx;
		border-top: 2rpx solid #f0f0f0;
		z-index: 100;
	}

	/* 按钮样式 */
	::v-deep .u-button--warning {
		background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
		border: none;
		border-radius: 8rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>